import Vue from 'vue'
import store from "../store"
import {
  Message,
  MessageBox
} from 'element-ui';
//整数
Vue.directive('Int', {
  bind: function (el) {
    const input = el.getElementsByTagName('input')[0]
    input.onkeyup = function (e) {
      intFun(input)

    }
    input.onblur = function (e) {
      intFun(input)
    }
  }
})
const intFun = (input) => {
  let reg = /^([1-9]\d*|[0]{1,1})$/;
  let kong = /[\S]+/
  if (input.required) {
    Message.error({
      message: input.placeholder + "必填！",
      type: "error"
    })
    return
  }
  if (kong.test(input.value) && !reg.test(input.value)) {
    Message.error(input.placeholder + "必须是自然数！")
    input.value = 0
  }
}
//权限管理模块-按钮
Vue.directive('auth', {
  inserted: function (el, binding, vnode) {
    let permissions = store.state.user.permissions || []
    if (!permissions.includes(binding.value)) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})
//复制
Vue.directive('copy', {
  bind(el, { value }) {
    el.$value = value
    el.handler = () => {
      if (!el.$value) {
        Message.success('无复制内容！')
        return
      }
      // 动态创建 textarea 标签
      const textarea = document.createElement('textarea')
      // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
      textarea.readOnly = 'readonly'
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      // 将要 copy 的值赋给 textarea 标签的 value 属性
      textarea.value = el.$value
      // 将 textarea 插入到 body 中
      document.body.appendChild(textarea)
      // 选中值并复制
      textarea.select()
      const result = document.execCommand('Copy')
      if (result) {
        Message.success('复制成功')
      }
      document.body.removeChild(textarea)
    }
    // 绑定点击事件，就是所谓的一键 copy 啦
    el.addEventListener('click', el.handler)
  },
  // 当传进来的值更新的时候触发
  componentUpdated(el, { value }) {
    el.$value = value
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind(el) {
    el.removeEventListener('click', el.handler)
  },
})
function addWaterMarker(str ,parentNode, font, textColor) {
  var can = document.createElement('canvas')
  parentNode.appendChild(can)
  can.width = 200
  can.height = 150
  can.style.display = 'none'
  var cans = can.getContext('2d')
  cans.rotate((-20 * Math.PI) / 180)
  cans.font = font 
  cans.fillStyle = textColor
  cans.textAlign = 'left'
  cans.textBaseline = 'Middle'
  cans.fillText(str, can.width / 10, can.height / 2)
  parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
}
//添加水印
Vue.directive('waterMarker', {
  bind: function (el, binding) {
    let values = {
      text:"张三5",
      font:'16px Microsoft JhengHei',
      textColor:"rgba(180, 180, 180, 0.7)"
    }
    if('value' in binding){
      values = binding.value
    }
    
    addWaterMarker(values.text , el, values.font, values.textColor)
  }
})